<template>

  <div
    style="
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      align-items: stretch;
    "
  >
    <div style="flex: 1 1 30%">
      <RelaList :id="data.id" :relaClassify="CONSTANTS.relaClassify.INPUT"></RelaList>
    </div>
    <div style="flex: 1 1 30%">
      <RelaList :id="data.id" :relaClassify="CONSTANTS.relaClassify.TOOL"></RelaList>
    </div>
    <div style="flex: 1 1 30%">
      <RelaList :id="data.id" :relaClassify="CONSTANTS.relaClassify.OUTPUT"></RelaList>
    </div>

  </div>
</template>
<script setup>
import { StarOutlined, StarFilled, StarTwoTone } from '@ant-design/icons-vue'

import CONSTANTS from '@/constants/Constants.js'
import { ref } from 'vue'
import PmpItemName from '@/components/PmpItemName.vue'

import RelaList from '@/components/RelaList.vue'
const props = defineProps({
  data: {
    type: Object,
    default: () => {},
  },
})
</script>
<style scoped></style>
